
<template>
    <div class="myPage">
     <div v-if="!showDetailPage">
       <div style="display: flex;justify-content: space-between;">
         <el-tabs v-model="activeName" :before-leave="handleClick111" style="width: calc(100% - 200px);">
           <el-tab-pane label="全部消息" name="first"></el-tab-pane>
           <el-tab-pane label="已读" name="second"></el-tab-pane>
           <el-tab-pane label="未读" name="third">
            <span slot="label">未读
              <el-badge :value="msgNum"></el-badge>
            </span>
           </el-tab-pane>
         </el-tabs>
         <div style="height: 40px;width: 180px;line-height: 40px;margin-left: 20px;">
          <el-input v-model="searchStr" style="width: 180px;" size="mini" placeholder="关键词搜索">
            <el-button slot="append" icon="el-icon-search" @click="handleSearch"></el-button>
          </el-input>
         </div>
       </div>
       <div>
        <template>
          <el-table
            :height="tableHeight"
            :data="adviceList"
            stripe
            v-loading="loadingTable"
            @row-click="rowClick"
            :row-class-name="tableRowClassName"
            style="width: 100%">
            <el-table-column
              prop="messageTitle"
              label="标题">
              <template slot-scope="scope">
                <span>
                  <span style="margin-right: 10px;">
                    <img src="../../assets/24gf-envelope2.svg" alt="" width="16" v-if="scope.row.readFlag === '0'">
                    <img src="../../assets/24gf-envelopeOpen2.svg" alt="" width="16" v-if="scope.row.readFlag === '1'">
                  </span>
                  {{ scope.row.messageTitle }}
                </span>
              </template>
            </el-table-column>
            <el-table-column
              prop="messageSource"
              label="消息来源">
            </el-table-column>
            <el-table-column
              prop="businessType"
              label="类型">
            </el-table-column>
            <el-table-column
              prop="createTime"
              label="时间">
            </el-table-column>
            <!-- <el-table-column
              fixed="right"
              label=""
              width="100">
              <template slot-scope="scope">
                <el-button @click="replyClick(scope.row)" type="text" size="small">回复</el-button>
              </template>
            </el-table-column> -->
          </el-table>
          <div class="pagination">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="queryAll.startpage"
              :page-sizes="[10,15,30,50]"
              :page-size="queryAll.pagesize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="queryAll.totalNum">
            </el-pagination>
          </div>
        </template>
       </div>
     </div>
     <div v-else>
      <el-button @click="goBack" size="mini">返回</el-button><br>
      <div class="messageContent">
        {{ messageObj.messageContent }}
      </div>
     </div>
       <el-dialog title="回复" :visible.sync="showReply">
          <el-input v-model="replyContent" autocomplete="off"></el-input>
          <div slot="footer" class="dialog-footer">
            <el-button @click="showReply = false">取 消</el-button>
            <el-button type="primary" @click="sureReply">确 定</el-button>
          </div>
        </el-dialog>
    </div>
  </template>
  
  <script>
  import searchForm from "@/views/businessProcessing/module/searchForm";
  import formList from "@/views/businessProcessing/goodContent/moudel/formList";
  import formList3 from "@/views/businessProcessing/goodContent/moudel/formList3";
  export default {
    name: "bulkCargo",
    components:{
      searchForm,
      formList3,
      formList,
    },
    data() {
      return {
        activeName:'first',
        searchStr:'',
        adviceList:[],
        showReply:false,
        replyContent:'',
        currentRow:{},
        msgNum:'',
        keys1:['mt','hmh','myl','tdh','khlx','cblx','jsfs','kssj','lx','shf','bt','hr'],
        quSee:false,
        goodsType:[],
        ships:[],
        out:false,
        page:0,
        pageSize:10,
        workKey:[],
        keys:['form1'],
        active:'1',
        title:'新增',
        loading:false,
        formLabelWidth:200,
        form:{},
        dialog:false,
        tableData: [],
        tableData1:[],
        tableData2:[],
        selection:[],
        tag:'',
        formList:{},
        see:false,
        myTable:[],
        queryAll:{
          startpage:1,
          pagesize:10,
          totalNum:0
        },
        loadingTable:false,
        showDetailPage:false,
        messageObj:{},
      };
    },
    mounted() {
      this.getInfo()
      this.setTag()
      this.handleSearch('first')
      let params = {
          startpage:'1',
          pagesize:'10',
          readFlag: '0',
          content:'',
        }
        this.$api
            .getAdvice(params)
            .then((res) => {
              console.log("res=========", res);
              this.msgNum = res.data.totalNum
            })
            .catch((e) => {
              console.log(e);
              // this.loading = false
            });
    },
    watch:{
      '$route'(){
        
        //this.getInfo()
        //this.setTag()
      }
    },
    destroyed() {
      //localStorage.setItem('myDate','')
    },
    
    computed: {
      tableHeight() {
        return 550;
      },
    },
    methods:{
      tableRowClassName({row, rowIndex}) {
        console.log('=============',row);
        if (row.readFlag === '1') {
          return 'alreadyRead';
        }
        return 'notRead';
      },
      goBack(){
        this.messageObj = {}
        this.handleSearch()
        this.showDetailPage = false
      },
      rowClick(val){
        console.log(val);
        // this.$router.push({
        //   name: 'adviceDetail',
        //   query: {
        //     obj: JSON.stringify(val)
        //   },
        // })

        this.messageObj = val
        if(val.readFlag === '0'){
          let userInfo = JSON.parse(localStorage.getItem("userInfo"))
          let params = {
            id:val.id,
            name:userInfo.userName,
          }
          this.$api.upDateStatus(params)
        }

        this.showDetailPage = true
      },
      handleClick111(val){
        console.log('88888888888',val);
        this.handleSearch(val)
      },
      handleSizeChange(val){
        this.queryAll.startpage = 1
        this.queryAll.pagesize = val
        this.handleSearch(this.activeName)
      },
      handleCurrentChange(val){
        this.queryAll.startpage = val
        this.handleSearch(this.activeName)
      },
      handleSearch(val){
        console.log('0000000000000000000',val);
        let params = {
          startpage:this.queryAll.startpage,
          pagesize:this.queryAll.pagesize,
          readFlag:val == 'first' ? '':val == 'second'? '1' : val == 'third' ? '0':'',
          content:this.searchStr
        }
        this.loadingTable = true
        this.$api
            .getAdvice(params)
            .then((res) => {
              console.log("res=========", res);
              this.loadingTable = false
              // this.loading = false
              this.adviceList = res.data.pages
              this.queryAll.totalNum = res.data.totalNum
              if(params.readFlag == '0'){
                this.msgNum = res.data.totalNum
              }
            })
            .catch((e) => {
              console.log(e);
              this.loadingTable = false
              // this.loading = false
            });
      },
      replyClick(val){
        console.log(val);
        this.currentRow = val
        this.replyContent = ''
        this.showReply = true
        
      },
      sureReply(){
        console.log('currentRow',this.currentRow)
        let params = {
          accno:'accno',
          name:'name',
          replyContent:this.replyContent,
          suggestId:this.currentRow.id,
          messageTitle:this.currentRow.title,
          messageContent:this.currentRow.content,
          messageSource:this.currentRow.ipAddress,
        }
        this.$api
            .replyThem(params)
            .then((res) => {
              console.log("res=========", res);
              this.showReply = false
              this.$message.success('回复成功！')
            })
            .catch((e) => {
              console.log(e);
              
            });
      },


      delBat(){
  
        let s = this.selection
        if(0===s.length){
          this.$message.error('请先选择货物！')
          return;
        }
        //console.log(s)
        //return
        //console.log(e.$index)
        let that=this
  
        this.$confirm('确定要删除货物吗？')
            .then(_ => {
              if('1' === that.active){
                that.tableData.forEach((item,index)=>{
                  s.forEach(item1=>{
                    if(JSON.stringify(item1) === JSON.stringify(item)){
                      that.tableData.splice(index,1)
                      that.tableData=that.tableData1
                    }
                  })
                })
              }
              if('2' === that.active){
                that.tableData2.forEach((item,index)=>{
                  s.forEach(item1=>{
                    if(JSON.stringify(item1) === JSON.stringify(item)){
                      that.tableData2.splice(index,1)
                      that.tableData=that.tableData2
                    }
                  })
                })
              }
              this.$refs.table.clearSelection()
              this.selection=[]
              this.$message.success('批量删除成功！')
            })
            .catch(_ => {});
  
      },
      changeS(e){
        /*console.log(9999999)
        console.log(e)*/
        this.$nextTick(() => {
          if(undefined!==e.planBulkGoods.planContainerGoods.gcentwg&&
              0!==e.planBulkGoods.planContainerGoods.gcentwg&&
              0!==e.planBulkGoods.planContainerGoods.gcentpks){
            //这里把数据重新赋值一下，不然就会出现bug，从第一页翻到第二页可以保留，在回到第一页选中的就没了
            this.$refs.table.toggleRowSelection(e, true);
            //this.$forceUpdate()
          }else{
            this.$refs.table.toggleRowSelection(e, false);
          }
        });
      },
      getGoods(){
        this.out = true
        this.tableData=[]
        this.$api.tosGetGoods({
          "planTag": this.tag,
          "termCode": "HX"
        }).then(res=>{
          res.data.forEach(item=>{
            let c={planBulkGoods:item}
            c.planBulkGoods.planContainerGoods={}
            c.planBulkGoods.planContainerGoods={
              gcentpks:0,//item.gtpks,
              gcentpksMax:item.gtpks,
              gcentwg:0,//item.gtwg
              gcentwgMax:item.gtwg
            }
            this.tableData.push(c)
          })
          console.log()
          this.tableData2.forEach(item=>{
            this.myTable.push(item)
          })
          //this.myTable=Object.assign(this.myTable,this.tableData2)
          if(0!==this.myTable.length){
            this.tableData.forEach(item=>{
              this.myTable.forEach(item1=>{
                if(item.planBulkGoods.bulkGId===item1.planBulkGoods.bulkGId){
                  //console.log(1111)
                  item.planBulkGoods.planContainerGoods=item1.planBulkGoods.planContainerGoods
                }else{
                  //console.log(22222)
                }
              })
            })
          }
          this.$forceUpdate()
        }).catch()
      },
      setTag(){
        let tag = null
        let url=this.$route.query.type
        //console.log(this.$route.query)
        this.tag=url
        this.$api.getGoodsType().then(res=>{
          this.goodsType=res.data
        }).catch()
  
        if(''!==localStorage.getItem('myDate')){
  
          let c=JSON.parse(localStorage.getItem('myDate'))
          /*console.log('ppppppp')
          console.log(c)*/
          let that=this
          this.$nextTick(() => {
            //that.$refs.search.getPer()
            if(null!==c.termCode){
              that.$refs.search.form.termCode=c.termCode
            }
            if(null!==c.vslCd){
              that.$refs.search.form.vslCd=c.vslCd
            }
            /*console.log(88888)
            console.log(c)
            console.log(that.$refs.search.form)*/
            that.$forceUpdate()
          })
  
          c.planBulkGoods.forEach((item,index)=>{
            this.tableData.push({
              planBulkGoods:item,
              plansExt:c.plansExt,
              edit:1
            })
            //this.$refs.table.toggleRowSelection(this.tableData[index], true);
            /*this.$refs.table.toggleRowSelection(item, true);
            this.$forceUpdate()*/
          })
          /*console.log(9999999)
          console.log(this.tableData[0])
          console.log(this.tableData.length>0&&null!==this.tableData[0].planBulkGoods)*/
  
          if(this.tableData.length>0&&null!==this.tableData[0].planBulkGoods){
            this.tableData.forEach(item=>{
              console.log(666)
              console.log(item.planBulkGoods.morphology)
              if('HWXT_JZH'===item.planBulkGoods.morphology){
                this.tableData2.push(item)
                //this.active='2'
                //console.log(3333)
              }else{
                this.tableData1.push(item)
                //this.active='1'
                //console.log(2222222)
              }
            })
            this.tableData= JSON.parse(JSON.stringify(this.tableData1))
            this.active='1'
          }else{
  
          }
  
          try {
            this.$refs.formList2.form=c
          }catch (e) {
            console.log(e)
          }
          if('loadIn'===this.$route.query.path||'output'===this.$route.query.path) {
            this.myTable = JSON.parse(JSON.stringify(this.tableData))
            this.getGoods()
          }
          //console.log(c)
        }else if('loadIn'===this.$route.query.path||'output'===this.$route.query.path){
          this.getGoods()
        }
      },
      getInfo(){
        console.log(11111)
        console.log(this.$route.query)
        this.quSee=this.$route.query.state
        if(undefined===this.$route.query.state){
          console.log(88888)
          localStorage.setItem('myDate','')
        }
        this.see = this.quSee || 'true' === this.quSee;
        console.log(this.see)
        if('loadIn'===this.$route.query.path||'output'===this.$route.query.path){
          this.workKey=['work','shipName','comType','num','out','del','add','import']
        }else{
          this.workKey=['work','shipName','comType','num','ship1','out','del','add','import','hr']
        }
      },
      submitDate(){
          if(0===this.selection.length){
            this.$message.error('请选择数据！')
            this.dialog=false
            return
          }
          if(undefined===this.$refs.formList2.form.termCode){
            this.$message.error('请选择作业码头！')
            return;
          }
          if(undefined===this.$refs.formList2.form.vslCd){
            this.$message.error('请选择船名航次！')
            return;
          }
          let that=this
          let c= JSON.parse(JSON.stringify(this.$refs.formList2.form))
          c.planTag=this.tag
          //c.createUser='admin'
          // c.cstCstmcd=this.$refs.search.form.cstCstmcd
          // c.vslCd=this.$refs.search.form.vslCd
          // c.termCode=this.$refs.search.form.termCode//this.keys.includes('form1')?'HX':'LTG'
          c.opprc='ZYLX_CC'
          let k=JSON.parse(JSON.stringify(this.selection))
          let goods=[]
          k.forEach(item=>{
            goods.push(item.planBulkGoods)
          })
          this.$set(c,'planBulkGoods',goods)
          console.log(c)
          console.log('kkkk')
          console.log(this.tag)
          let type=that.tag
          console.log(c.id)
          if(null===c.id||undefined===c.id){
            type='_Add'
          }else{
            type='_Edit'
          }
          this.$api.shipE(c,this.tag+type).then(res=>{
            if(200===res.code){
              this.dialog=false
              let that= this
              this.$message.success({message:'_Add'===type?
                    '新增计划成功！':'编辑计划成功！',onClose(){
                  that.selection=[]
                  that.tableData=[]
                  that.$refs.formList2.form={}
                  localStorage.setItem('myDate','')
                  that.link()
                }
              })
            }else{
              this.$message.error(res.message)
            }
          }).catch(err=>{
            this.$message.error(err.message)
          })
      },
      submit(){
        if(this.keys.includes('form1')){
          //console.log(66555237496)
          console.log(this.$refs.formList.form)
          console.log(8888888)
          console.log(this.tableData1)
          console.log(this.tableData)
          let c=JSON.parse(JSON.stringify(this.$refs.formList.form))
          if('新增'===this.title&&1!==c.edit){
            this.tableData1.push(c)
          }
          this.tableData=this.tableData1
          //this.$refs.table.toggleRowSelection(c, true);
          this.dialog=false
        }
        if(this.keys.includes('form3')){
          //console.log(66555237496)
          console.log(this.$refs.formList.form)
          let c=JSON.parse(JSON.stringify(this.$refs.formList.form))
          if('新增'===this.title&&1!==c.edit){
            this.tableData2.push(c)
          }
          /*this.tableData2.push(c)*/
          this.tableData=this.tableData2
          this.dialog=false
        }
        if(this.keys.includes('form2')){
          /*console.log(this.selection.length)
          console.log(this.$refs.formList.form)*/
          let that=this
          let c= JSON.parse(JSON.stringify(this.$refs.formList.form))
          c.planTag=this.tag
          //c.createUser='admin'
          c.cstCstmcd=this.$refs.search.form.cstCstmcd
          c.vslCd=this.$refs.search.form.vslCd
          c.termCode=this.$refs.search.form.termCode//this.keys.includes('form1')?'HX':'LTG'
          c.opprc='ZYLX_CC'
          let k=JSON.parse(JSON.stringify(this.selection))
          let goods=[]
          k.forEach(item=>{
            goods.push(item.planBulkGoods)
          })
          this.$set(c,'planBulkGoods',goods)
          console.log(c)
          console.log('kkkk')
          console.log(this.tag)
          let type=that.tag
          console.log(c.id)
          if(null===c.id||undefined===c.id){
            type='_Add'
          }else{
            type='_Edit'
          }
          this.$api.shipE(c,this.tag+type).then(res=>{
            if(200===res.code){
              this.dialog=false
              let that= this
              this.$message.success({message:'_Add'===type?
                    '新增计划成功！':'编辑计划成功！',onClose(){
                  that.link()
                }
              })
            }else{
              this.$message.error(res.message)
            }
          }).catch(err=>{
            this.$message.error(err.message)
          })
        }
        /*console.log(this.$refs.formList.form)
        this.$api.xAdd(this.$refs.formList.form).then().catch()*/
      },
      planTag(){
        if(0===this.selection.length){
          this.$message.error('请选择数据！')
          this.dialog=false
          return
        }
        if(undefined===this.$refs.search.form.termCode){
          this.$message.error('请选择作业码头！')
          return;
        }
        if(undefined===this.$refs.search.form.vslCd){
          this.$message.error('请选择港口！')
          return;
        }
  
        if(!this.quSee||'false'===this.quSee){
          this.see=false
        }else{
          this.see=true
        }
        this.keys=['form2']
        this.title='生成计划'
        this.dialog=true
        this.$nextTick(res=>{
          //this.$refs.formList.form.plansExt.createUser='admin'
          console.log(99999)
          /*let e=localStorage.getItem("userInfo");
          console.log(e)
          let b=this.$store;
          console.log(b)*/
          /*let e=localStorage.getItem("userInfo");
          if(null===e){
            this.$refs.formList.form.plansExt.createUser=''//'admin'
          }else{
            this.$refs.formList.form.plansExt.createUser=JSON.parse(e).name
          }*/
          if(undefined!==this.formList.id&&null!==this.formList.id){
            this.$refs.formList.form=this.formList
          }else{
            this.$refs.formList.form={
              plansExt:{
                createUser:'',
                recipient:'',
                billNo:'',
                moveTo:''
              },
              planBulkGoods:{
                receiverName:'',
                morphology:this.keys.includes('form1')?'HWXT_SZH':'HWXT_JZH',
                gtypecd:'',
                planContainerGoods:{},
                gname:'',
                gunit:'',
              },
              planContainerGoods:{
                gcentwg:'',
                gcentpks:''
              },
              isCheck:-1,
              billno:1
            }
          }
          this.$forceUpdate()
        })
      },
      add(v){
        this.see=false
        console.log(7777777)
        console.log(v)
        if('1'===v){
          this.active='1'
        }
        if('2'===v){
          this.active='2'
        }
        if('1'===this.active){
          this.keys=['form1']
        }
        if('2'===this.active){
          this.keys=['form3']
        }
  
        //this.keys=['form1']
        this.title='新增'
        this.dialog=true
        this.$nextTick(res=>{
          /*this.$refs.formList.form={
            default: () => []
          }*/
          this.$refs.formList.getGoods()
          this.$refs.formList.form={
            plansExt:{
              createUser:'',
              recipient:'',
              billNo:''
            },
            planBulkGoods:{
              receiverName:'',
              morphology:this.keys.includes('form1')?'HWXT_SZH':'HWXT_JZH',
              gtypecd:'',
              planContainerGoods:{},
              gname:'',
              gunit:'',
            },
            planContainerGoods:{
              gcentwg:'',
              gcentpks:''
            },
            isCheck:-1,
            billno:1
          }
  
        })
      },
      handleSelect(e){
        console.log(e)
        this.active=e
        console.log(e)
        if('1'===e){
          console.log(777)
          this.tableData=this.tableData1
          this.keys=['form1']
        }
        if('2'===e){
          console.log(888)
          this.tableData=this.tableData2
          this.keys=['form3']
        }
        //console.log(this.active)
      },
      link(){
        this.$router.push({
          name:'success'
        })
      },
      cancelForm() {
        //this.keys=['form1']
        this.loading = false;
        this.dialog = false;
        /*this.$refs.formList.form={
          default: () => []
        }*/
        //clearTimeout(this.timer);
      },
      del(e){
        console.log(e.$index)
        let that=this
        this.$confirm('确定要删除货物吗？')
            .then(_ => {
              if('1' === that.active){
                that.tableData1.splice(e.$index,1)
                that.tableData=that.tableData1
              }
              if('2' === that.active){
                that.tableData2.splice(e.$index,1)
                that.tableData=that.tableData2
              }
              this.$refs.table.clearSelection()
              this.selection=[]
              this.$message.success('删除成功！')
            })
            .catch(_ => {});
  
      },
      handleClick(row,e) {
        if('1'===this.active){
          this.keys=['form1']
        }
        if('2'===this.active){
          this.keys=['form3']
        }
        //this.keys=['form1']
        console.log(row);
        row.edit=1
        //console.log('ppppppp')
        if('see'!==e){
          this.title='编辑'
          this.see=false
        }else{
          this.title='查看'
          this.see=true
        }
        this.dialog=true
        this.$nextTick(res=>{
          this.$refs.formList.getGoods()
          this.$refs.formList.form=row//JSON.parse(JSON.stringify(row))
        })
      },
      handleSelectionchangeS(val) {
        this.selection = val;
        //this.$refs.table.toggleRowSelection(val, true);
      },
      getRowKeys(row) {
        return row.id
      },
    },
  }
  </script>
  
  <style scoped lang="less">
  .el-menu-item {
    height: 39px;
    line-height: 39px;
  }
  .el-menu{
    border: none;
    background: transparent;
  }
  .el-menu::after{
    border: none;
    background: transparent;
  }
  .myPage{
    background: #fff;
    padding: 10px 20px 20px 20px;
    border-radius: 6px;
    height: 660px;
    overflow: auto;
    .messageContent{
      padding: 20px;
      font-size: 14px !important;
    }
  }
  /deep/ .el-table__empty-block {
    justify-content: flex-start!important;
  }
  .card{
    border-radius: 5px 5px 5px 5px;
    opacity: 1;
    border: 1px solid #D7D7D7;
    .blue{
      height: 50px;
      background: #0F47B8;
      opacity: 1;
      line-height: 50px;
      color: #fff;
      padding-left: 30px;
    }
  }
    .pagination{
      // height: 50px;
      margin: 10px;
      text-align: right;
    }
    /deep/.el-table .alreadyRead {
      color: #6F6F6F !important;
    }
    /deep/.el-table .notRead {
      color: #000000 !important;
    }
  </style>
  